<template>
	<view class="main_money">
		<view class="main_money_bgBox">
			<uni-forms ref="formRef" label-width="150" :model="withdrawMobileVo">
				<view class="item_fee">
					<uni-forms-item
						label="选择银行"
						name="bankNo"
						required
						:rules="[{required: true, errorMessage: '请选择银行'}]"
					>
						<view class="item_content">
							<uni-data-select
								v-model="withdrawMobileVo.bankNo"
								@change="changeBankNo"
								:clear="false"
								:localdata="bankCardListSelectList"
							/>
						</view>
					</uni-forms-item>
					<uni-forms-item label="银行卡号" required>
						<view class="item_content">
							<span class="content_name">
								{{ withdrawMobileVo.bankNo }}
								<span
									style="color: #999; font-weight: 500"
									v-if="!withdrawMobileVo.bankNo"
								>
									根据银行卡获取
								</span>
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收款人姓名" required>
						<view class="item_content">
							<span class="content_name">
								{{ withdrawMobileVo.cardholderName }}
								<span
									style="color: #999; font-weight: 500"
									v-if="!withdrawMobileVo.cardholderName"
								>
									根据银行卡获取
								</span>
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="银行行号" required>
						<view class="item_content">
							<span class="content_name">
								{{ withdrawMobileVo.bankCode }}
								<span
									style="color: #999; font-weight: 500"
									v-if="!withdrawMobileVo.bankCode"
								>
									根据银行卡获取
								</span>
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="开户网点" required>
						<view class="item_content">
							<span class="content_name">
								{{ withdrawMobileVo.openAccountBankNetwork }}
								<span
									style="color: #999; font-weight: 500"
									v-if="!withdrawMobileVo.openAccountBankNetwork"
								>
									根据银行卡获取
								</span>
							</span>
						</view>
					</uni-forms-item>
				</view>
				<view class="item_fee">
					<uni-forms-item label="工单数量">
						<view class="item_content">
							<span class="content_name">
								{{ withdrawMobileVo.orderVos.length }}
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="总工单金额">
						<view class="item_content">
							<span class="content_name">￥{{ totalMoney.toFixed(2) }}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="手续费方式">
						<view class="item_content">
							<span class="content_name">
								{{
									`${
										withdrawMobileVo.withdrawHandlingFeeStrategy == 1
											? '按总单提现金额的' +
											  withdrawMobileVo.handingFeeProportion +
											  '%'
											: '按每单' + withdrawMobileVo.handingFeeFixedOrder + '元'
									}`
								}}
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="总手续费">
						<view class="item_content">
							<span class="content_name">
								￥{{
									withdrawMobileVo.withdrawHandlingFeeStrategy == 1
										? (
												withdrawMobileVo.handingFeeProportion *
												0.01 *
												totalMoney
										  ).toFixed(2)
										: (
												withdrawMobileVo.handingFeeFixedOrder *
												withdrawMobileVo.orderVos.length
										  ).toFixed(2)
								}}
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="到账金额">
						<view class="item_content">
							<span class="content_name">
								￥{{ (totalWithdrawMoney || 0).toFixed(2) }}
							</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="">
						<span style="color: #606266; font-size: 14px">申请备注</span>
						<view class="text_input">
							<uni-easyinput
								type="textarea"
								v-model="withdrawMobileVo.applyRemark"
								:inputBorder="false"
								placeholderStyle="font-size:14px;"
								:maxlength="50"
								placeholder="请填写申请备注"
							></uni-easyinput>
							<view class="coun">{{ 0 }}/50</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="item_fee">
					<view class="item_fee_tableHead" @click="showOrder">
						已选工单({{ withdrawMobileVo.orderVos.length }})
						<span :class="isShow ? 'down_up_' : 'down_up'"></span>
					</view>
					<view class="order_sele_info" v-if="!isShow">
						<view
							class="order_sele_info_item"
							v-for="item in withdrawMobileVo.orderVos"
							:key="item.id"
						>
							<view class="order_info_item">
								<view class="content_info">
									<span class="label">工单单号：</span>
									<span
										class="value"
										@click="goDetail(item.workId)"
										style="color: #007cff"
									>
										{{ item.workNo }}
									</span>
								</view>
								<view class="content_info">
									<span class="label">工单金额：</span>
									<span class="value" style="font-weight: bold">
										￥{{ (item.oldWithdrawMoney || 0).toFixed(2) }}
									</span>
								</view>
								<view class="content_info">
									<span class="label">实际到账：</span>
									<span class="value" style="font-weight: bold">
										￥{{ (item.withdrawMoney || 0).toFixed(2) }}
									</span>
								</view>
								<view class="content_info">
									<span class="label">工程师名称：</span>
									<span class="value">{{ item.engineer || '' }}</span>
								</view>
								<view class="content_info">
									<span class="label">工程师手机号：</span>
									<span class="value">{{ item.engineerPhone || '' }}</span>
								</view>
							</view>
							<view class="order_info_item">
								<view class="content_info">
									<span>手续费：</span>
									<span style="font-weight: bold">
										￥{{ item.money.toFixed(2) }}
									</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="footer_order">
			<view
				class="footer_order_right"
				:class="{btn_: !withdrawMobileVo.bankNo}"
				@click="submitFun"
			>
				<view class="btn">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	import _ from 'lodash';
	import store from '@/store_network/index.js';
	import {onUnload, onLoad} from '@dcloudio/uni-app';
	import apiAccount from '@/util/network_api/account.js';
	const formRef = ref();
	onLoad(async (e) => {
		getNetworkEmpBandSelect();
		getNetworkWithdrawHandlingFeeStrategy();
	});
	onUnload(() => {
		uni.hideLoading();
	});
	// 张开显示
	const isShow = ref(true);
	const showOrder = () => {
		isShow.value = !isShow.value;
	};
	const withdrawMobileVo = ref({
		applyNetworkEmp: '', //申请人名称
		applyNetworkEmpId: '', //申请人ID，即服务人员ID
		applyNetworkId: '', //服务商ID
		applyRemark: '', //申请备注
		bankNo: '', //银行卡号
		cardholderName: '', //	持卡人姓名
		handingFeeFixedOrder: 0, //每单固定手续费：当withdrawHandlingFeeStrategy=2时生效
		handingFeeProportion: 0, //手续费比例，单位为%，当withdrawHandlingFeeStrategy=1时生效
		id: '',
		name: '', //银行卡名称
		openingBank: '', //开户行
		orderVos: [
			// {
			// 	"id": '',//
			// 	"oldWithdrawMoney": 0,//旧提现金额
			// 	"remark": "",
			// 	"withdrawMoney": 0,//提现金额
			// 	"workId": '',
			// 	"workNo": ""//工单单号
			// }
		],
		withdrawHandlingFeeStrategy: 1, //提现手续费策略：1-按比例收取(按提现总金额计算)，2-每间固定(按每单总金额计算),示例值(1)
		bankCode: '',
		openAccountBankNetwork: '',
	});
	// 获取手续费策略
	const totalMoney = ref(0); //总工单金额
	const totalWithdrawMoney = ref(0); //总到账工单金额
	const getNetworkWithdrawHandlingFeeStrategy = () => {
		apiAccount.getNetworkWithdrawHandlingFeeStrategy().then((res) => {
			if (res.code == 20000) {
				withdrawMobileVo.value.withdrawHandlingFeeStrategy =
					res.data.row.withdrawHandlingFeeStrategy;
				withdrawMobileVo.value.handingFeeFixedOrder =
					res.data.row.handingFeeFixedOrder;
				withdrawMobileVo.value.handingFeeProportion =
					res.data.row.handingFeeProportion;
				totalMoney.value = 0;
				totalWithdrawMoney.value = 0;
				withdrawMobileVo.value.orderVos = store.state.orderVos.map((o) => {
					let money = 0;
					if (withdrawMobileVo.value.withdrawHandlingFeeStrategy == 1) {
						money = Number(
							withdrawMobileVo.value.handingFeeProportion *
								0.01 *
								o.totalPrice || 0,
						);
					} else {
						money = withdrawMobileVo.value.handingFeeFixedOrder;
					}
					totalMoney.value = Number(o.totalPrice) + totalMoney.value; //总工单金额
					totalWithdrawMoney.value = Number(
						(o.totalPrice - money + totalWithdrawMoney.value).toFixed(2),
					); //总到账工单金额
					return {
						id: '',
						oldWithdrawMoney: o.totalPrice || 0, //旧提现金额
						remark: '',
						money: money,
						withdrawMoney: parseFloat((o.totalPrice - money).toFixed(2)), //提现金额
						workId: o.id,
						workNo: o.workNo, //工单单号
						engineer: o.engineer, // 工程师
						engineerPhone: o.engineerPhone, // 工程师手机号
					};
				});
			}
		});
	};
	// 获取银行卡下拉
	const bankCardListSelectList = ref([]);
	const getNetworkEmpBandSelect = () => {
		apiAccount.getNetworkEmpBandSelect().then((res) => {
			if (res.code == 20000) {
				bankCardListSelectList.value = res.data.rows.map((o) => {
					let text =
						o.name.length > 10
							? o.name.slice(0, 10) + '...' + `(${o.code.slice(-4)})`
							: `${o.name}(${o.code.slice(-4)})`;
					return {
						id: o.id,
						text: text,
						value: o.code,
						name: o.name,
						cardholderName: o.cardholderName,
						bankCode: o.bankCode,
						openAccountBankNetwork: o.openAccountBankNetwork
					};
				});
			}
		});
	};
	// 银行卡号选择变化
	const changeBankNo = (bankNo: string) => {
		bankCardListSelectList.value.filter((o) => {
			if (o.value == bankNo) {
				console.log(o);
				withdrawMobileVo.value.name = o.name;
				withdrawMobileVo.value.cardholderName = o.cardholderName;
				withdrawMobileVo.value.bankCode = o.bankCode;
				withdrawMobileVo.value.openAccountBankNetwork = o.openAccountBankNetwork;
			}
		});
	};

	// 提交
	const submitFun = _.debounce(async () => {
		await formRef.value
			.validate()
			.then(async (res) => {
				uni.showLoading({
					title: '加载中...',
				});
				let dataObj = _.cloneDeep(withdrawMobileVo.value);
				dataObj.orderVos = dataObj.orderVos.map((o) => {
					o.withdrawMoney = o.oldWithdrawMoney;
					return o;
				});
				await apiAccount.saveWithdraw(dataObj).then((res) => {
					if (res.code == 20000) {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功',
							icon: 'success',
						});
						store.commit('set_orderVos', []);
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/pages_network/home/myAccount/withdrawalLog',
							});
						}, 800);
					}
				});
				uni.hideLoading();
			})
			.catch((err) => {});
	}, 700);
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/pages_network/order/detail?workId=' + id,
		});
	};
</script>

<style lang="scss" scoped>
	.main_money {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 10vh;

			.info_base {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;
			}

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				:deep(.uni-forms-item) {
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid rgb(243, 244, 248);
				}

				:deep(.uni-select) {
					border: none;

					.uni-select__input-placeholder {
						text-align: right;
						margin-right: 12rpx;
						font-size: 14px;
						color: #999;
						font-weight: 500 !important;
					}

					.uni-select__input-text {
						text-align: right;
						margin-right: 12rpx;
						font-weight: bold;
					}

					.uni-popper__arrow {
						left: 76%;
					}

					.uni-select__selector {
						top: 100%;
						left: 20%;
						max-width: 80%;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					// margin: 24rpx 0 0;
					font-weight: bold;
					font-size: 28rpx;

					.down_up {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-top: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}

					.down_up_ {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-bottom: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}
				}

				.order_sele_info {
					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.order_info_item {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							padding: 12rpx 0;
							row-gap: 5px;

							.content_info {
								display: flex;

								.label {
									width: 196rpx;
									text-align: right;
								}

								.value {
									width: 240rpx;
								}
							}
						}
					}

					.order_sele_info_item ~ .order_sele_info_item {
						border-top: 2rpx solid #eee;
					}
				}

				.item_content {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;

					:deep(.checklist-box) {
						margin-left: 40rpx;
						margin-right: 0;
					}

					.input_pl {
						color: #999;
						width: 100rpx;
						font-size: 28rpx;
					}

					.content_name {
						flex: 1;
						text-align: right;
						width: 300rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-right: 12rpx;
						font-weight: bold;
					}

					:deep(.input_with) {
						.uni-easyinput__content {
							width: 180rpx !important;
						}
					}
				}

				.text_input {
					margin: 24rpx 0 0;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						// background-color: #fff !important;
					}

					padding: 12rpx 12rpx 24rpx;
					background-color: #fff;
					border: 1rpx solid rgb(243, 244, 248);
					border-bottom: none;

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			z-index: 99;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(177, 177, 177, 0.1);

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.gray_tip {
					color: #00c0c0;
				}
			}

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}

			.btn_ {
				background-color: #007cffa0;
			}
		}
	}
</style>
